import 'package:flutter/material.dart';
import 'package:flutter_api/widgets/title_text_container.dart';

/// 使用本地图片(资源)：
///  1.在工程目录下新建文件夹 images 在里面建子文件加夹 2.0x 3.0x 适配不同的分辨率
///  2.例如a.jpg放在images根目录、2.0x、3.0x各一张
///  3.在pubspec.yaml文件下声明图片
///   assets: - images/test.jpg
///
/// Image本身不能显示图片是由ImageProvider提供具体图片资源
/// ImageProvider默认使用ImageCache做缓存
class ImagePage extends StatefulWidget {
  @override
  _ImagePageState createState() => _ImagePageState();
}

class _ImagePageState extends State<ImagePage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(12.0),
      child: ListView(
        children: [
          TitleTextContainer('使用项目资源库(Image.asset)', child: AssetImageWidget()),
          TitleTextContainer('网络图片(Image.network)', child: NetImageWidget()),
          TitleTextContainer('圆形图片(ClipOval)', child: CircleImageWidget()),
          TitleTextContainer('字体图标', child: IconWidget()),
        ],
      ),
    );
  }
}

// 加载资源库图片
class AssetImageWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // 命名构造的方式
        Image.asset(
          'assets/images/a.jpg',
          height: 200.0,
        ),
        SizedBox(height: 18),
        // 使用AssetImage
        Image(
          image: AssetImage('assets/images/b.jpg'),
          width: 200.0,
          height: 200.0,
          // 颜色混入图片中，可以指定混入模式
          color: Colors.red,
          // 混入模式
          colorBlendMode: BlendMode.colorDodge,
          // 颜色混入图片中，可以指定混入模式
          repeat: ImageRepeat.repeat, // 当图片小于父元素时，填充方法
        )
      ],
    );
  }
}

// 网络图片
class NetImageWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // 默认情况，有内存缓存，ImageCache，有默认缓存大小
        Image.network(
            'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
            height: 200),
        // 加载网络图片，使用占位图
        FadeInImage.assetNetwork(
            // 渐入渐出时间
            fadeInDuration: Duration(seconds: 2),
            fadeOutDuration: Duration(seconds: 2),
            placeholder: 'assets/images/c.jpg',
            image:
                'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png'),
      ],
    );
  }
}

// 圆形图片
class CircleImageWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: ClipOval(
        child: Image.asset(
          'assets/images/flower.jpg',
          width: 100,
          height: 100,
          // 图片填充父元素方式
          fit: BoxFit.cover,
        ),
      ),
    );
  }
}

class IconWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // 图标,字体图标,就是字体演化而来
        Icon(
          Icons.pets,
          size: 100,
          color: Colors.blue,
        ),
        // 使用Text显示字体图标库,需要使用\u转换为unicode编码,还需要指定使用的字体库
        Text(
          '\uee5e',
          style: TextStyle(
              fontSize: 40,
              color: Colors.deepOrange,
              fontFamily: "MaterialIcons"),
        )
      ],
    );
  }
}
